<script setup lang="ts">
import {ref} from "vue";
import {storeToRefs} from "pinia";
import useUserStore from "@/pinia/userStore.ts";
import Form from '@/components/Loign/components/form.vue'
import WxCode from "@/components/Loign/components/wxCode.vue";
import LoginTips from "@/components/Loign/components/loginTips.vue";

const userStore = useUserStore()
const {loginDialog, flag} = storeToRefs(userStore)

const formRef = ref<null>(null)
const handleClose = () => {
  formRef.value.clearFormData()
}

</script>

<template>
  <div class="login">
    <el-dialog width="35%" v-model="loginDialog" title="用户登录" :close-on-click-modal="false" :close-on-press-escape="false" @close="handleClose">
      <div class="content">
        <el-card class="form" shadow="hover">
          <Form v-if="flag" ref="formRef"></Form>
          <WxCode v-else></WxCode>
        </el-card>
        <div class="code">
          <LoginTips></LoginTips>
        </div>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="loginDialog = false">关闭窗口</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.login {
  ::v-deep(.el-dialog__body) {
    border-top: 1px solid rgb(248, 248, 248);
    border-bottom: 1px solid rgb(248, 248, 248);
    padding: 20px;
  }

  .content {
    display: flex;
    justify-content: space-between;

    .form {
      flex: 1;

    }

    .code {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;
    }
  }
}
</style>
